<template>
  <ve-modal title="处置车辆1" v-model="visible" @cancel="onCancel" @confirm="onConfirm">
    <ve-form ref="formRef" :model="form" :noClass="false" :rules="rules">
      <ve-form-item prop="disposalType" :required="true" label="处置方式">
        <ve-radio :list="typeOptions" v-model="form.disposalType" @confirm="typeChoose" />
      </ve-form-item>
      <ve-form-item prop="disposalTime" :label="timeTlt" required>
        <ve-date-picker v-model="form.disposalTime" mode="date" @confirm="onDateConfirm" />
      </ve-form-item>
      <ve-form-item v-if="form.disposalType == 1 || form.disposalType == 2" :label="numTlt" unit="元">
        <ve-input-number v-model="form.disposalAmount" />
      </ve-form-item>
      <ve-form-item label="备注" :borderBottom="false" labelPosition="top">
        <ve-input v-model="form.disposalRemark" type="textarea" placeholder="请输入备注" />
      </ve-form-item>
    </ve-form>
  </ve-modal>
</template>
<script setup lang="ts">
  import { ref, computed, watch } from 'vue'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: '',
    },
    source: {
      type: Number,
      default: 1,
    },
  })
  const emits = defineEmits(['update:visible', 'confirm'])
  const typeOptions = computed(() => {
    const _optionsList = [
      { label: '车辆出售', value: 1 },
      { label: '车辆报废', value: 2 },
      // { label: '借调车归还', value: 3 },
      { label: '其他', value: 4 },
    ]

    if (props.source === 2) {
      _optionsList.splice(2, 0, { label: '借调车归还', value: 3 })
    }

    return _optionsList
  })

  const visible = computed({
    get() {
      return props.visible
    },
    set(val) {
      emits('update:visible', val)
    },
  })

  const timeTlt = ref('出售时间')
  const numTlt = ref('出售金额')

  const formRef = ref()
  const form = ref({
    id: props.id,
    disposalType: 1,
    disposalTime: '',
    disposalAmount: '',
    disposalRemark: '',
  })

  const rules = ref({
    disposalTime: [{ required: true, message: `请选择${timeTlt.value}` }],
  })

  const resetForm = () => {
    form.value.disposalTime = ''
    form.value.disposalAmount = ''
    form.value.disposalRemark = ''
    formRef.value.clearValidate()
  }

  const typeChoose = (options: any) => {
    const { value: e } = options
    resetForm()
    if (e == 1) {
      timeTlt.value = '出售时间'
      numTlt.value = '出售金额'
      rules.value.disposalTime[0].message = `请选择${timeTlt.value}`
    }
    if (e == 2) {
      timeTlt.value = '报废时间'
      numTlt.value = '补贴金额'
      rules.value.disposalTime[0].message = `请选择${timeTlt.value}`
    }
    if (e == 3) {
      timeTlt.value = '归还时间'
      rules.value.disposalTime[0].message = `请选择${timeTlt.value}`
    }
    if (e == 4) {
      timeTlt.value = '下线时间'
      rules.value.disposalTime[0].message = `请选择${timeTlt.value}`
    }
  }

  const onCancel = () => {
    timeTlt.value = '出售时间'
    numTlt.value = '出售金额'
    form.value.disposalType = 1
    resetForm()
    emits('update:visible', false)
  }

  const onConfirm = () => {
    formRef.value.validate((valid: any) => {
      if (valid) {
        emits('confirm', form.value)
      }
    })
  }

  const onDateConfirm = (date: string) => {
    console.log(date, 'date')

    form.value.disposalTime = date
  }

  watch(
    () => props.visible,
    () => {
      timeTlt.value = '出售时间'
      numTlt.value = '出售金额'
      form.value.disposalType = 1
      form.value.disposalTime = ''
      form.value.disposalAmount = ''
      form.value.disposalRemark = ''
    },
    {
      immediate: true,
    },
  )
</script>
<style scoped lang="less">
  :deep(.radio .title) {
    margin-right: 24rpx;
  }
</style>
